ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಹೋರಾಟ: ಆಧುನಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ನೈಜ-ಪ್ರಪಂಚದ ಮಾನದಂಡಗಳು

ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ಕ್ರಿಯಾತ್ಮಕ ಜಗತ್ತಿನಲ್ಲಿ, ಯಾವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್ "ಅತ್ಯುತ್ತಮ" ಎಂಬ ಚರ್ಚೆ ನಿರಂತರವಾಗಿರುತ್ತದೆ. ಡೆವಲಪರ್‌ಗಳು ತಮ್ಮ ಮೆಚ್ಚಿನವುಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತಾರೆ, ಡೆವಲಪರ್ ಅನುಭವ, ಇಕೋಸಿಸ್ಟಮ್ ಗಾತ್ರ, ಅಥವಾ ಕಲಿಕೆಯ ರೇಖೆಯನ್ನು ಉಲ್ಲೇಖಿಸುತ್ತಾರೆ. ಆದಾಗ್ಯೂ, ಅಂತಿಮ ಬಳಕೆದಾರರು ಮತ್ತು ವ್ಯವಹಾರಗಳಿಗೆ, ಒಂದು ಮೆಟ್ರಿಕ್ ಎಲ್ಲಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿರುತ್ತದೆ: ಕಾರ್ಯಕ್ಷಮತೆ. ವೇಗವಾದ, ಸ್ಪಂದಿಸುವ ಅಪ್ಲಿಕೇಶನ್ ಒಂದು ಪರಿವರ್ತನೆ ಮತ್ತು ಬೌನ್ಸ್ ನಡುವಿನ ವ್ಯತ್ಯಾಸವಾಗಿರಬಹುದು, ಬಳಕೆದಾರರ ಸಂತೋಷ ಮತ್ತು ಬಳಕೆದಾರರ ಹತಾಶೆಯ ನಡುವೆ.

TodoMVC ಯಂತಹ ಸಿಂಥೆಟಿಕ್ ಮಾನದಂಡಗಳು ತಮ್ಮ ಸ್ಥಾನವನ್ನು ಹೊಂದಿದ್ದರೂ, ಅವು ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಸಂಕೀರ್ಣತೆಗಳನ್ನು ಸೆರೆಹಿಡಿಯಲು ವಿಫಲವಾಗುತ್ತವೆ. ಅವು ಪ್ರೊಡಕ್ಷನ್‌ನಲ್ಲಿ ವಿರಳವಾಗಿ ಎದುರಾಗುವ ಸನ್ನಿವೇಶವಾದ, ಪ್ರತ್ಯೇಕ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಪರೀಕ್ಷಿಸುತ್ತವೆ. ಈ ಲೇಖನವು ವಿಭಿನ್ನ ವಿಧಾನವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ನಾವು ರಿಯಾಕ್ಟ್, ವ್ಯೂ, ಮತ್ತು ಆಂಗ್ಯುಲರ್‌ನಂತಹ ಫ್ರಂಟ್-ಎಂಡ್ ಜಗತ್ತಿನ ದೈತ್ಯರನ್ನು, ಜೊತೆಗೆ ಹೊಸ ಪೀಳಿಗೆಯ ಸವಾಲುಗಾರರಾದ ಸ್ವೆಲ್ಟ್ ಮತ್ತು ಸಾಲಿಡ್‌ಜೆಎಸ್ ಅನ್ನು ಹೋಲಿಸುವ ನೈಜ-ಪ್ರಪಂಚದ ಅಪ್ಲಿಕೇಶನ್ ಮಾನದಂಡವನ್ನು ಆಳವಾಗಿ ಪರಿಶೀಲಿಸುತ್ತಿದ್ದೇವೆ. ನಮ್ಮ ಗುರಿಯು ಸೈದ್ಧಾಂತಿಕ ವಾದಗಳನ್ನು ಮೀರಿ, ನಿಮ್ಮ ಮುಂದಿನ ಯೋಜನೆಗಾಗಿ ತಿಳುವಳಿಕೆಯುಳ್ಳ ನಿರ್ಧಾರವನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡಲು ಸ್ಪಷ್ಟವಾದ ಡೇಟಾವನ್ನು ಒದಗಿಸುವುದಾಗಿದೆ.

ನೈಜ-ಪ್ರಪಂಚದ ಮಾನದಂಡಗಳು ಏಕೆ ಮುಖ್ಯ

ನಾವು ಡೇಟಾವನ್ನು ಪ್ರಸ್ತುತಪಡಿಸುವ ಮೊದಲು, ಸಿಂಥೆಟಿಕ್ ಮತ್ತು ನೈಜ-ಪ್ರಪಂಚದ ಮಾನದಂಡಗಳ ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ಸಿಂಥೆಟಿಕ್ ಪರೀಕ್ಷೆಗಳು ಸಾಮಾನ್ಯವಾಗಿ 1,000 ಟು-ಡು ಲಿಸ್ಟ್ ಐಟಂಗಳನ್ನು ರಚಿಸುವುದು ಮತ್ತು ನಾಶಪಡಿಸುವಂತಹ ಒಂದೇ, ಪುನರಾವರ್ತಿತ ಕಾರ್ಯದ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುತ್ತವೆ. ಇದು ಫ್ರೇಮ್‌ವರ್ಕ್‌ನ ರೆಂಡರಿಂಗ್ ಇಂಜಿನ್ ಅನ್ನು ಸ್ಟ್ರೆಸ್-ಟೆಸ್ಟ್ ಮಾಡಲು ಅತ್ಯುತ್ತಮವಾಗಿದೆ ಆದರೆ ಇದರ ಬಗ್ಗೆ ನಿಮಗೆ ಹೆಚ್ಚು ಹೇಳುವುದಿಲ್ಲ:

• ಆರಂಭಿಕ ಲೋಡ್ ಕಾರ್ಯಕ್ಷಮತೆ: ಮೊಬೈಲ್ ನೆಟ್‌ವರ್ಕ್‌ನಲ್ಲಿ ಮೊದಲ ಬಾರಿಗೆ ಭೇಟಿ ನೀಡುವವರಿಗೆ ಅಪ್ಲಿಕೇಶನ್ ಎಷ್ಟು ಬೇಗನೆ ಬಳಸಬಹುದಾಗುತ್ತದೆ? ಇದು ಬಂಡಲ್ ಗಾತ್ರ, ಪಾರ್ಸಿಂಗ್ ಸಮಯ, ಮತ್ತು ಹೈಡ್ರೇಶನ್ ತಂತ್ರವನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.
• ಸಂಕೀರ್ಣ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್: ಜಾಗತಿಕ ಸ್ಟೇಟ್ ಅನ್ನು ಹಂಚಿಕೊಳ್ಳುವ ಬಹು, ಸಂಬಂಧವಿಲ್ಲದ ಕಾಂಪೊನೆಂಟ್‌ಗಳಾದ್ಯಂತ ಸಂವಹನಗಳನ್ನು ಫ್ರೇಮ್‌ವರ್ಕ್ ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತದೆ?
• API ಲೇಟೆನ್ಸಿ ಇಂಟಿಗ್ರೇಷನ್: ಡೇಟಾವನ್ನು ತರಬೇಕಾದಾಗ, ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ಪ್ರದರ್ಶಿಸಬೇಕಾದಾಗ, ಮತ್ತು ನಂತರ ಫಲಿತಾಂಶಗಳನ್ನು ರೆಂಡರ್ ಮಾಡಬೇಕಾದಾಗ ಅಪ್ಲಿಕೇಶನ್ ಹೇಗೆ ಭಾಸವಾಗುತ್ತದೆ?
• ರೂಟಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆ: ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ (SPA) ಒಳಗೆ ಬಳಕೆದಾರರು ವಿಭಿನ್ನ ಪುಟಗಳು ಅಥವಾ ವೀಕ್ಷಣೆಗಳ ನಡುವೆ ಎಷ್ಟು ವೇಗವಾಗಿ ಮತ್ತು ಸರಾಗವಾಗಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಬಹುದು?

ನೈಜ-ಪ್ರಪಂಚದ ಮಾನದಂಡವು ಈ ಸನ್ನಿವೇಶಗಳನ್ನು ಅನುಕರಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ. ಪ್ರತಿ ಫ್ರೇಮ್‌ವರ್ಕ್‌ನಲ್ಲಿ ಒಂದೇ ರೀತಿಯ, ಮಧ್ಯಮ ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿರ್ಮಿಸುವ ಮೂಲಕ, ನಾವು ಬಳಕೆದಾರರ ಅನುಭವ ಮತ್ತು ಪರಿಣಾಮವಾಗಿ, ವ್ಯವಹಾರದ ಗುರಿಗಳ ಮೇಲೆ ನೇರವಾಗಿ ಪರಿಣಾಮ ಬೀರುವ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್‌ಗಳನ್ನು ಅಳೆಯಬಹುದು. ಈ ಮೆಟ್ರಿಕ್‌ಗಳು ಗೂಗಲ್‌ನ ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್ (CWV) ಗೆ ನಿಕಟವಾಗಿ ಸಂಬಂಧಿಸಿವೆ, ಇದು ಈಗ ಅದರ ಸರ್ಚ್ ಶ್ರೇಯಾಂಕದ ಅಲ್ಗಾರಿದಮ್‌ನ ಭಾಗವಾಗಿದೆ. ಸಂಕ್ಷಿಪ್ತವಾಗಿ, ಕಾರ್ಯಕ್ಷಮತೆ ಕೇವಲ ತಾಂತ್ರಿಕ ಕಾಳಜಿಯಲ್ಲ; ಇದು ಎಸ್‌ಇಒ ಮತ್ತು ವ್ಯವಹಾರದ ಅನಿವಾರ್ಯತೆಯಾಗಿದೆ.

ಸ್ಪರ್ಧಿಗಳು: ಒಂದು ಸಂಕ್ಷಿಪ್ತ ಅವಲೋಕನ

ಇಂದು ಇಕೋಸಿಸ್ಟಮ್‌ನಲ್ಲಿರುವ ಅತ್ಯಂತ ಪ್ರಮುಖ ಮತ್ತು ಆಸಕ್ತಿದಾಯಕ ಐದು ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳನ್ನು ನಾವು ಆಯ್ಕೆ ಮಾಡಿದ್ದೇವೆ. ಪ್ರತಿಯೊಂದೂ ವಿಭಿನ್ನ ತತ್ವಶಾಸ್ತ್ರ ಮತ್ತು ವಾಸ್ತುಶಿಲ್ಪವನ್ನು ಹೊಂದಿದೆ, ಇದು ಅದರ ಕಾರ್ಯಕ್ಷಮತೆಯ ಗುಣಲಕ್ಷಣಗಳ ಮೇಲೆ ನೇರವಾಗಿ ಪ್ರಭಾವ ಬೀರುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ (v18)

ಮೆಟಾದಿಂದ ಅಭಿವೃದ್ಧಿಪಡಿಸಲ್ಪಟ್ಟು ಮತ್ತು ನಿರ್ವಹಿಸಲ್ಪಡುತ್ತಿರುವ ರಿಯಾಕ್ಟ್, ನಿರ್ವಿವಾದ ಮಾರುಕಟ್ಟೆ ನಾಯಕ. ಇದು ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ ವಾಸ್ತುಶಿಲ್ಪ ಮತ್ತು ವರ್ಚುವಲ್ DOM (VDOM) ಅನ್ನು ಜನಪ್ರಿಯಗೊಳಿಸಿತು. VDOM ನಿಜವಾದ DOM ನ ಇನ್-ಮೆಮೊರಿ ಪ್ರತಿನಿಧಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಇದು ರಿಯಾಕ್ಟ್ ಗೆ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ಬ್ಯಾಚ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಅದರ ಬೃಹತ್ ಇಕೋಸಿಸ್ಟಮ್ ಮತ್ತು ಪ್ರತಿಭಾ ಸಮೂಹವು ಇದನ್ನು ವಿಶ್ವದಾದ್ಯಂತ ಅನೇಕ ಕಂಪನಿಗಳಿಗೆ ಡೀಫಾಲ್ಟ್ ಆಯ್ಕೆಯನ್ನಾಗಿ ಮಾಡುತ್ತದೆ.

ವ್ಯೂ (v3)

ವ್ಯೂ ಅನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರಗತಿಶೀಲ ಫ್ರೇಮ್‌ವರ್ಕ್ ಎಂದು ವಿವರಿಸಲಾಗುತ್ತದೆ. ಇದು ಅದರ ಸುಲಭವಾದ ಕಲಿಕೆಯ ರೇಖೆ, ಅತ್ಯುತ್ತಮ ದಸ್ತಾವೇಜನ್ನು, ಮತ್ತು ನಮ್ಯತೆಗೆ ಹೆಸರುವಾಸಿಯಾಗಿದೆ. ವ್ಯೂ 3 ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಾಕ್ಸಿಗಳ ಮೇಲೆ ನಿರ್ಮಿಸಲಾದ ಹೊಸ ರಿಯಾಕ್ಟಿವಿಟಿ ಸಿಸ್ಟಮ್ ಮತ್ತು ಟೆಂಪ್ಲೇಟ್‌ಗಳನ್ನು ಹೆಚ್ಚು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಬಲ್ಲ ಕಂಪೈಲರ್‌ನೊಂದಿಗೆ ಗಮನಾರ್ಹ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸುಧಾರಣೆಗಳನ್ನು ತಂದಿತು. ಇದು ರಿಯಾಕ್ಟ್‌ನಂತೆಯೇ ವರ್ಚುವಲ್ DOM ಅನ್ನು ಸಹ ಬಳಸುತ್ತದೆ.

ಆಂಗ್ಯುಲರ್ (v16)

ಗೂಗಲ್‌ನ ಆಂಗ್ಯುಲರ್ ಒಂದು ಲೈಬ್ರರಿಗಿಂತ ಹೆಚ್ಚಾಗಿ ಒಂದು ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಆಗಿದೆ. ಇದು ಒಂದು ಸಮಗ್ರ, ಅಭಿಪ್ರಾಯಾತ್ಮಕ ಫ್ರೇಮ್‌ವರ್ಕ್ ಆಗಿದ್ದು, ಇದು ರೂಟಿಂಗ್‌ನಿಂದ ಹಿಡಿದು ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್‌ವರೆಗೆ ಎಲ್ಲದಕ್ಕೂ ಪರಿಹಾರಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಐತಿಹಾಸಿಕವಾಗಿ ದೊಡ್ಡ ಬಂಡಲ್ ಗಾತ್ರಗಳಿಗೆ ಹೆಸರುವಾಸಿಯಾಗಿದ್ದರೂ, ಐವಿ ಕಂಪೈಲರ್, ಟ್ರೀ-ಶೇಕಿಂಗ್, ಮತ್ತು ಸಿಗ್ನಲ್‌ಗಳು ಮತ್ತು ಸ್ಟ್ಯಾಂಡ್‌ಅಲೋನ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಪರಿಚಯದೊಂದಿಗೆ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಗಳು ಇದನ್ನು ಕಾರ್ಯಕ್ಷಮತೆಯ ದೃಷ್ಟಿಯಿಂದ ಹೆಚ್ಚು ಸ್ಪರ್ಧಾತ್ಮಕವಾಗಿಸಿವೆ.

ಸ್ವೆಲ್ಟ್ (v4)

ಸ್ವೆಲ್ಟ್ ಒಂದು ಆಮೂಲಾಗ್ರ ವಿಧಾನವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಇದು ಬಿಲ್ಡ್ ಸಮಯದಲ್ಲಿ ಚಲಿಸುವ ಒಂದು ಕಂಪೈಲರ್ ಆಗಿದ್ದು, ನಿಮ್ಮ ಸ್ವೆಲ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ನೇರವಾಗಿ DOM ಅನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸುವ ಹೆಚ್ಚು ಆಪ್ಟಿಮೈಸ್ಡ್, ಇಂಪರೇಟಿವ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಆಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ. ಇದರರ್ಥ ನಿಮ್ಮ ಪ್ರೊಡಕ್ಷನ್ ಬಂಡಲ್‌ನಲ್ಲಿ ಯಾವುದೇ ವರ್ಚುವಲ್ DOM ಮತ್ತು ಬಹುತೇಕ ಯಾವುದೇ ಫ್ರೇಮ್‌ವರ್ಕ್-ನಿರ್ದಿಷ್ಟ ರನ್‌ಟೈಮ್ ಕೋಡ್ ಇರುವುದಿಲ್ಲ. ಇದರ ತತ್ವಶಾಸ್ತ್ರವೆಂದರೆ ಕೆಲಸವನ್ನು ಬ್ರೌಸರ್‌ನಿಂದ ಬಿಲ್ಡ್ ಹಂತಕ್ಕೆ ವರ್ಗಾಯಿಸುವುದು.

ಸಾಲಿಡ್‌ಜೆಎಸ್ (v1.7)

ಸಾಲಿಡ್‌ಜೆಎಸ್ ಸಾಮಾನ್ಯವಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ಚಾರ್ಟ್‌ಗಳಲ್ಲಿ ಅಗ್ರಸ್ಥಾನದಲ್ಲಿದೆ ಮತ್ತು ಗಮನಾರ್ಹ ಆಕರ್ಷಣೆಯನ್ನು ಗಳಿಸುತ್ತಿದೆ. ಇದು JSX ಅನ್ನು ಬಳಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಇದು ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಪರಿಚಿತವೆನಿಸುತ್ತದೆ, ಆದರೆ ಇದು ವರ್ಚುವಲ್ DOM ಅನ್ನು ಬಳಸುವುದಿಲ್ಲ. ಬದಲಾಗಿ, ಇದು ಸ್ಪ್ರೆಡ್‌ಶೀಟ್‌ನಂತೆಯೇ ಫೈನ್-ಗ್ರೇನ್ಡ್ ರಿಯಾಕ್ಟಿವಿಟಿ ವ್ಯವಸ್ಥೆಯನ್ನು ಬಳಸುತ್ತದೆ. ಡೇಟಾದ ಒಂದು ತುಣುಕು ಬದಲಾದಾಗ, ಅದರ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುವ DOM ನ ನಿಖರವಾದ ಭಾಗಗಳನ್ನು ಮಾತ್ರ ಅಪ್‌ಡೇಟ್ ಮಾಡಲಾಗುತ್ತದೆ, ಸಂಪೂರ್ಣ ಕಾಂಪೊನೆಂಟ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಮರು-ಚಲಾಯಿಸದೆ. ಇದು ಶಸ್ತ್ರಚಿಕಿತ್ಸೆಯ ನಿಖರತೆ ಮತ್ತು ನಂಬಲಾಗದ ವೇಗಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ.

ಮಾನದಂಡ ಅಪ್ಲಿಕೇಶನ್: "ಗ್ಲೋಬಲ್ ಇನ್‌ಸೈಟ್ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್"

ಈ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು, ನಾವು "ಗ್ಲೋಬಲ್ ಇನ್‌ಸೈಟ್ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್" ಎಂಬ ಮಾದರಿ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿರ್ಮಿಸಿದ್ದೇವೆ. ಈ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಅನೇಕ ಡೇಟಾ-ಚಾಲಿತ ವ್ಯಾಪಾರ ಸಾಧನಗಳನ್ನು ಪ್ರತಿನಿಧಿಸುವಂತೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಇದು ಈ ಕೆಳಗಿನ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒಳಗೊಂಡಿದೆ:

• ದೃಢೀಕರಣ: ಒಂದು ಅಣಕು ಲಾಗಿನ್/ಲಾಗ್‌ಔಟ್ ಫ್ಲೋ.
• ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಮುಖಪುಟ: ಅಣಕು API ನಿಂದ ಪಡೆದ ಡೇಟಾದೊಂದಿಗೆ ಹಲವಾರು ಸಾರಾಂಶ ಕಾರ್ಡ್‌ಗಳು ಮತ್ತು ಚಾರ್ಟ್‌ಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.
• ದೊಡ್ಡ ಡೇಟಾ ಟೇಬಲ್ ಪುಟ: 1,000 ಸಾಲುಗಳು ಮತ್ತು 10 ಕಾಲಮ್‌ಗಳ ಡೇಟಾದೊಂದಿಗೆ ಟೇಬಲ್ ಅನ್ನು ತಂದು ರೆಂಡರ್ ಮಾಡುವ ಪುಟ.
• ಇಂಟರಾಕ್ಟಿವ್ ಟೇಬಲ್ ವೈಶಿಷ್ಟ್ಯಗಳು: ಕ್ಲೈಂಟ್-ಸೈಡ್ ಸಾರ್ಟಿಂಗ್, ಫಿಲ್ಟರಿಂಗ್, ಮತ್ತು ಸಾಲು ಆಯ್ಕೆ.
• ವಿವರ ವೀಕ್ಷಣೆ: ಟೇಬಲ್‌ನಲ್ಲಿ ಆಯ್ಕೆಮಾಡಿದ ಸಾಲಿಗಾಗಿ ವಿವರ ಪುಟಕ್ಕೆ ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೂಟಿಂಗ್.
• ಜಾಗತಿಕ ಸ್ಟೇಟ್: ದೃಢೀಕೃತ ಬಳಕೆದಾರ ಮತ್ತು UI ಥೀಮ್ (ಲೈಟ್/ಡಾರ್ಕ್ ಮೋಡ್) ಗಾಗಿ ಹಂಚಿಕೆಯ ಸ್ಟೇಟ್.

ಈ ಸೆಟಪ್ ನಮಗೆ ಆರಂಭಿಕ ಲೋಡ್ ಮತ್ತು API ಡೇಟಾ ರೆಂಡರಿಂಗ್‌ನಿಂದ ಹಿಡಿದು ದೊಡ್ಡ ಡೇಟಾಸೆಟ್‌ನಲ್ಲಿ ಸಂಕೀರ್ಣ UI ಸಂವಹನಗಳ ಸ್ಪಂದಿಸುವಿಕೆಯವರೆಗೆ ಎಲ್ಲವನ್ನೂ ಅಳೆಯಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ವಿಧಾನ: ನಾವು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೇಗೆ ಅಳೆದಿದ್ದೇವೆ

ಪಾರದರ್ಶಕತೆ ಮತ್ತು ಸ್ಥಿರತೆ ನ್ಯಾಯಯುತ ಹೋಲಿಕೆಗೆ ಅತ್ಯಂತ ಮುಖ್ಯ. ನಮ್ಮ ಪರೀಕ್ಷಾ ಸೆಟಪ್ ಇಲ್ಲಿದೆ:

• ಪರಿಕರಗಳು: ಗೂಗಲ್ ಲೈಟ್‌ಹೌಸ್ (ಇನ್‌ಕಾಗ್ನಿಟೋ ವಿಂಡೋದಲ್ಲಿ ಚಲಾಯಿಸಲಾಗಿದೆ) ಮತ್ತು ಕ್ರೋಮ್ ಡೆವ್‌ಟೂಲ್ಸ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಪ್ರೊಫೈಲರ್.
• ಪರಿಸರ: ಎಲ್ಲಾ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಪ್ರೊಡಕ್ಷನ್‌ಗಾಗಿ ನಿರ್ಮಿಸಲಾಗಿದೆ ಮತ್ತು ಸ್ಥಳೀಯವಾಗಿ ಸರ್ವ್ ಮಾಡಲಾಗಿದೆ.
• ಪರೀಕ್ಷಾ ಪರಿಸ್ಥಿತಿಗಳು: ನೈಜ-ಪ್ರಪಂಚದ ಮೊಬೈಲ್ ಬಳಕೆದಾರರನ್ನು ಅನುಕರಿಸಲು, ಎಲ್ಲಾ ಪರೀಕ್ಷೆಗಳನ್ನು 4x CPU ಸ್ಲೋಡೌನ್ ಮತ್ತು ಫಾಸ್ಟ್ 3G ನೆಟ್‌ವರ್ಕ್ ಥ್ರಾಟಲ್‌ನೊಂದಿಗೆ ಚಲಾಯಿಸಲಾಯಿತು. ಇದು ಉನ್ನತ-ಮಟ್ಟದ ಡೆವಲಪರ್ ಹಾರ್ಡ್‌ವೇರ್‌ನಿಂದ ಫಲಿತಾಂಶಗಳು ವಿಕೃತಗೊಳ್ಳುವುದನ್ನು ತಡೆಯುತ್ತದೆ.
• ಅಳತೆ ಮಾಡಿದ ಪ್ರಮುಖ ಮೆಟ್ರಿಕ್‌ಗಳು:
  • ಆರಂಭಿಕ JS ಬಂಡಲ್ ಗಾತ್ರ (gzipped): ಆರಂಭಿಕ ಭೇಟಿಯಲ್ಲಿ ಬ್ರೌಸರ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಬೇಕಾದ, ಪಾರ್ಸ್ ಮಾಡಬೇಕಾದ, ಮತ್ತು ಎಕ್ಸಿಕ್ಯೂಟ್ ಮಾಡಬೇಕಾದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಪ್ರಮಾಣ.
  • ಫಸ್ಟ್ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ (FCP): DOM ವಿಷಯದ ಮೊದಲ ತುಣುಕು ರೆಂಡರ್ ಆದ ಸಮಯವನ್ನು ಗುರುತಿಸುತ್ತದೆ.
  • ಲಾರ್ಜೆಸ್ಟ್ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ (LCP): ವ್ಯೂಪೋರ್ಟ್‌ನಲ್ಲಿ ಅತಿದೊಡ್ಡ ಗೋಚರ ವಿಷಯ ಅಂಶವು ರೆಂಡರ್ ಆದಾಗ ಅಳೆಯುತ್ತದೆ. ಒಂದು ಪ್ರಮುಖ ಕೋರ್ ವೆಬ್ ವೈಟಲ್.
  • ಟೈಮ್ ಟು ಇಂಟರಾಕ್ಟಿವ್ (TTI): ಪುಟವು ಸಂಪೂರ್ಣವಾಗಿ ಇಂಟರಾಕ್ಟಿವ್ ಆಗಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯ.
  • ಟೋಟಲ್ ಬ್ಲಾಕಿಂಗ್ ಟೈಮ್ (TBT): ಮುಖ್ಯ ಥ್ರೆಡ್ ಬ್ಲಾಕ್ ಆಗಿದ್ದ ಒಟ್ಟು ಸಮಯವನ್ನು ಅಳೆಯುತ್ತದೆ, ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಅನ್ನು ತಡೆಯುತ್ತದೆ. ಹೊಸ INP (ಇಂಟರಾಕ್ಷನ್ ಟು ನೆಕ್ಸ್ಟ್ ಪೇಂಟ್) ಕೋರ್ ವೆಬ್ ವೈಟಲ್‌ಗೆ ನೇರವಾಗಿ ಸಂಬಂಧಿಸಿದೆ.
  • ಮೆಮೊರಿ ಬಳಕೆ: ಆರಂಭಿಕ ಲೋಡ್ ನಂತರ ಮತ್ತು ಹಲವಾರು ಸಂವಹನಗಳ ನಂತರ ಅಳತೆ ಮಾಡಿದ ಹೀಪ್ ಗಾತ್ರ.

ಫಲಿತಾಂಶಗಳು: ನೇರ ಹೋಲಿಕೆ

ಹಕ್ಕುತ್ಯಾಗ: ಈ ಫಲಿತಾಂಶಗಳು ನಮ್ಮ ನಿರ್ದಿಷ್ಟ ಮಾನದಂಡ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಆಧರಿಸಿವೆ. ಈ ಸಂಖ್ಯೆಗಳು ಪ್ರತಿ ಫ್ರೇಮ್‌ವರ್ಕ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಗುಣಲಕ್ಷಣಗಳನ್ನು ವಿವರಿಸುತ್ತವೆ, ಆದರೆ ನಿಮ್ಮ ಸ್ವಂತ ಅಪ್ಲಿಕೇಶನ್‌ನ ವಾಸ್ತುಶಿಲ್ಪವು ವಿಭಿನ್ನ ಫಲಿತಾಂಶಗಳನ್ನು ನೀಡಬಹುದು.

ಸುತ್ತು 1: ಆರಂಭಿಕ ಲೋಡ್ ಮತ್ತು ಬಂಡಲ್ ಗಾತ್ರ

ಹೊಸ ಬಳಕೆದಾರರಿಗೆ, ಮೊದಲ ಅನಿಸಿಕೆ ಎಲ್ಲವೂ. ಈ ಸುತ್ತು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಎಷ್ಟು ಬೇಗನೆ ಡೌನ್‌ಲೋಡ್ ಮಾಡಬಹುದು ಮತ್ತು ಬಳಸಬಹುದಾದ ಸ್ಥಿತಿಗೆ ರೆಂಡರ್ ಮಾಡಬಹುದು ಎಂಬುದರ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.

• ಸ್ವೆಲ್ಟ್: ವಿಜೇತ. ಕೇವಲ ~9 KB ನ gzipped JS ಬಂಡಲ್‌ನೊಂದಿಗೆ, ಸ್ವೆಲ್ಟ್ ಸ್ಪಷ್ಟ ನಾಯಕವಾಗಿತ್ತು. ಅದರ FCP ಮತ್ತು LCP ಸ್ಕೋರ್‌ಗಳು ಅತ್ಯುತ್ತಮವಾಗಿದ್ದವು, ಏಕೆಂದರೆ ಬ್ರೌಸರ್‌ಗೆ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ಬಹಳ ಕಡಿಮೆ ಫ್ರೇಮ್‌ವರ್ಕ್ ಕೋಡ್ ಇತ್ತು. ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಬಹುತೇಕ ತಕ್ಷಣವೇ ಕಾಣಿಸಿಕೊಂಡಿತು.
• ಸಾಲಿಡ್‌ಜೆಎಸ್: ಎರಡನೇ ಸ್ಥಾನ. ಬಂಡಲ್ ಗಾತ್ರವು ~12 KB ನಲ್ಲಿ ಸ್ವಲ್ಪ ದೊಡ್ಡದಾಗಿತ್ತು. ಕಾರ್ಯಕ್ಷಮತೆಯು ಸ್ವೆಲ್ಟ್‌ಗೆ ಬಹುತೇಕ ಸಮಾನವಾಗಿತ್ತು, ಅತ್ಯಂತ ವೇಗದ ಆರಂಭಿಕ ಲೋಡ್ ಅನುಭವವನ್ನು ನೀಡಿತು.
• ವ್ಯೂ: ಬಲವಾದ ಪ್ರದರ್ಶಕ. ವ್ಯೂನ ಬಂಡಲ್ ಗೌರವಾನ್ವಿತ ~35 KB ಯಲ್ಲಿತ್ತು. ಅದರ ಕಂಪೈಲರ್ ಆಪ್ಟಿಮೈಸೇಷನ್‌ಗಳು ಮಿಂಚಿದವು, ವೇಗದ LCP ಮತ್ತು TTI ಅನ್ನು ನೀಡಿದವು, ಅದು ಹೆಚ್ಚು ಸ್ಪರ್ಧಾತ್ಮಕವಾಗಿತ್ತು.
• ರಿಯಾಕ್ಟ್: ಮಧ್ಯಮ ಸ್ಥಾನ. `react` ಮತ್ತು `react-dom` ಸಂಯೋಜನೆಯು ~48 KB ಬಂಡಲ್‌ಗೆ ಕಾರಣವಾಯಿತು. ಯಾವುದೇ ರೀತಿಯಲ್ಲಿ ನಿಧಾನವಾಗಿಲ್ಲದಿದ್ದರೂ, VDOM ನಿರ್ಮಿಸುವ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೈಡ್ರೇಟ್ ಮಾಡುವ ಕೆಲಸದಿಂದಾಗಿ TTIಯು ನಾಯಕರಿಗಿಂತ ಗಮನಾರ್ಹವಾಗಿ ಹೆಚ್ಚಾಗಿತ್ತು.
• ಆಂಗ್ಯುಲರ್: ಸುಧಾರಿತ, ಆದರೆ ಇನ್ನೂ ದೊಡ್ಡದು. ಆಂಗ್ಯುಲರ್‌ನ ಬಂಡಲ್ ~65 KB ನಲ್ಲಿ ಅತಿ ದೊಡ್ಡದಾಗಿತ್ತು. ಇದು ಹಳೆಯ ಆವೃತ್ತಿಗಳಿಗಿಂತ ದೊಡ್ಡ ಸುಧಾರಣೆಯಾಗಿದ್ದರೂ, ಆರಂಭಿಕ ಪಾರ್ಸಿಂಗ್ ಮತ್ತು ಬೂಟ್‌ಸ್ಟ್ರಾಪಿಂಗ್ ವೆಚ್ಚವು ಇನ್ನೂ ಅತ್ಯಧಿಕವಾಗಿತ್ತು, ಇದು ಈ ಪರೀಕ್ಷೆಯಲ್ಲಿ ಅತ್ಯಂತ ನಿಧಾನವಾದ FCP ಮತ್ತು LCP ಗೆ ಕಾರಣವಾಯಿತು.

ಒಳನೋಟ: ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವು ಸಂಪೂರ್ಣವಾಗಿ ನಿರ್ಣಾಯಕವಾಗಿರುವ ಯೋಜನೆಗಳಿಗೆ (ಉದಾ. ಇ-ಕಾಮರ್ಸ್ ಲ್ಯಾಂಡಿಂಗ್ ಪುಟಗಳು, ಮಾರ್ಕೆಟಿಂಗ್ ಸೈಟ್‌ಗಳು), ಸ್ವೆಲ್ಟ್ ಮತ್ತು ಸಾಲಿಡ್‌ನಂತಹ ಕಂಪೈಲರ್-ಆಧಾರಿತ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು ತಮ್ಮ ಕನಿಷ್ಠ ರನ್‌ಟೈಮ್ ಹೆಜ್ಜೆಗುರುತಿನಿಂದಾಗಿ ಒಂದು ವಿಶಿಷ್ಟ, ಅಳೆಯಬಹುದಾದ ಪ್ರಯೋಜನವನ್ನು ಹೊಂದಿವೆ.

ಸುತ್ತು 2: ರನ್‌ಟೈಮ್ ಮತ್ತು ಸಂವಹನ ಕಾರ್ಯಕ್ಷಮತೆ

ಅಪ್ಲಿಕೇಶನ್ ಲೋಡ್ ಆದ ನಂತರ, ಅದನ್ನು ಬಳಸಲು ಹೇಗೆ ಅನಿಸುತ್ತದೆ? ನಮ್ಮ 1,000-ಸಾಲಿನ ಡೇಟಾ ಟೇಬಲ್‌ನಲ್ಲಿ ತೀವ್ರವಾದ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಮಾಡುವ ಮೂಲಕ ನಾವು ಇದನ್ನು ಪರೀಕ್ಷಿಸಿದ್ದೇವೆ: ಒಂದು ಕಾಲಮ್‌ನಿಂದ ಸಾರ್ಟ್ ಮಾಡುವುದು ಮತ್ತು ಎಲ್ಲಾ ಸೆಲ್‌ಗಳನ್ನು ಹುಡುಕುವ ಟೆಕ್ಸ್ಟ್ ಫಿಲ್ಟರ್ ಅನ್ನು ಅನ್ವಯಿಸುವುದು.

• ಸಾಲಿಡ್‌ಜೆಎಸ್: ವಿಜೇತ. ಇಲ್ಲಿ ಸಾಲಿಡ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ ಅದ್ಭುತವಾಗಿತ್ತು. ಸಾರ್ಟಿಂಗ್ ಮತ್ತು ಫಿಲ್ಟರಿಂಗ್ ತಕ್ಷಣವೇ ಆದಂತೆ ಭಾಸವಾಯಿತು. ಅದರ ಫೈನ್-ಗ್ರೇನ್ಡ್ ರಿಯಾಕ್ಟಿವಿಟಿಯಿಂದಾಗಿ ಬದಲಾಯಿಸಬೇಕಾದ DOM ನೋಡ್‌ಗಳನ್ನು ಮಾತ್ರ ಸ್ಪರ್ಶಿಸಲಾಯಿತು. TBT ಅತ್ಯಂತ ಕಡಿಮೆಯಿತ್ತು, ಇದು ಭಾರಿ ಗಣನೆಯ ಸಮಯದಲ್ಲಿಯೂ ನಾನ್-ಬ್ಲಾಕಿಂಗ್ UI ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ.
• ಸ್ವೆಲ್ಟ್: ಅತ್ಯುತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆ. ಸ್ವೆಲ್ಟ್ ಸಾಲಿಡ್‌ನ ಹಿಂದೆಯೇ ಇತ್ತು. ಅದರ ಕಂಪೈಲ್ಡ್, ನೇರ DOM ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್‌ಗಳು ಅತ್ಯಂತ ಸಮರ್ಥವೆಂದು ಸಾಬೀತಾಯಿತು. ಬಳಕೆದಾರರ ಅನುಭವವು ಸರಾಗ ಮತ್ತು ಸ್ಪಂದಿಸುವಂತಿತ್ತು, TBT ಬಹಳ ಕಡಿಮೆಯಿತ್ತು.
• ವ್ಯೂ: ತುಂಬಾ ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆ. ವ್ಯೂನ ರಿಯಾಕ್ಟಿವಿಟಿ ವ್ಯವಸ್ಥೆಯು ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ನಿರ್ವಹಿಸಿತು. ಸಾಲಿಡ್ ಮತ್ತು ಸ್ವೆಲ್ಟ್‌ಗೆ ಹೋಲಿಸಿದರೆ ಫಿಲ್ಟರಿಂಗ್‌ನಲ್ಲಿ ಅತ್ಯಂತ ಸ್ವಲ್ಪ, ಬಹುತೇಕ ಅಗೋಚರ ವಿಳಂಬವಿತ್ತು, ಆದರೆ ಒಟ್ಟಾರೆ ಅನುಭವವು ಅತ್ಯುತ್ತಮವಾಗಿತ್ತು ಮತ್ತು ಬಹುಪಾಲು ಬಳಕೆಯ ಸಂದರ್ಭಗಳನ್ನು ತೃಪ್ತಿಪಡಿಸುತ್ತದೆ.
• ರಿಯಾಕ್ಟ್: ಒಳ್ಳೆಯದು, ಆದರೆ ಆಪ್ಟಿಮೈಸೇಷನ್ ಅಗತ್ಯವಿದೆ. ಬಾಕ್ಸ್‌ನಿಂದ ಹೊರಗೆ, ರಿಯಾಕ್ಟ್ ಇಂಪ್ಲಿಮೆಂಟೇಶನ್ ದೊಡ್ಡ ಟೇಬಲ್ ಅನ್ನು ಫಿಲ್ಟರ್ ಮಾಡುವಾಗ ಗಮನಾರ್ಹ ವಿಳಂಬವನ್ನು ತೋರಿಸಿತು. 1,000-ಸಾಲಿನ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮರು-ರೆಂಡರಿಂಗ್ ಮಾಡುವುದು ದುಬಾರಿಯಾಗಿದ್ದರಿಂದ ಮುಖ್ಯ ಥ್ರೆಡ್ ಅಲ್ಪಾವಧಿಗೆ ಬ್ಲಾಕ್ ಆಗಿತ್ತು. ಇದನ್ನು ಸಾಲು ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ `React.memo` ಮತ್ತು ಫಿಲ್ಟರಿಂಗ್ ಲಾಜಿಕ್‌ಗಾಗಿ `useMemo` ನಂತಹ ಆಪ್ಟಿಮೈಸೇಷನ್‌ಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಅನ್ವಯಿಸುವ ಮೂಲಕ ಪರಿಹರಿಸಬಹುದಾಗಿತ್ತು. ಆಪ್ಟಿಮೈಸೇಷನ್‌ನೊಂದಿಗೆ, ಕಾರ್ಯಕ್ಷಮತೆ ಉತ್ತಮವಾಯಿತು, ಆದರೆ ಇದಕ್ಕೆ ಹೆಚ್ಚುವರಿ ಡೆವಲಪರ್ ಪ್ರಯತ್ನದ ಅಗತ್ಯವಿತ್ತು.
• ಆಂಗ್ಯುಲರ್: ಒಳ್ಳೆಯದು, ಸೂಕ್ಷ್ಮ ವ್ಯತ್ಯಾಸಗಳೊಂದಿಗೆ. ಆಂಗ್ಯುಲರ್‌ನ ಡೀಫಾಲ್ಟ್ ಚೇಂಜ್ ಡಿಟೆಕ್ಷನ್ ಮೆಕ್ಯಾನಿಸಂ ಕೂಡ ರಿಯಾಕ್ಟ್‌ನಂತೆಯೇ ಫಿಲ್ಟರಿಂಗ್ ಕಾರ್ಯದೊಂದಿಗೆ ಸ್ವಲ್ಪ ಹೆಣಗಾಡಿತು. ಆದಾಗ್ಯೂ, ಟೇಬಲ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು `OnPush` ಚೇಂಜ್ ಡಿಟೆಕ್ಷನ್ ತಂತ್ರವನ್ನು ಬಳಸಲು ಬದಲಾಯಿಸುವುದರಿಂದ ಕಾರ್ಯಕ್ಷಮತೆ ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಿತು, ಅದನ್ನು ಹೆಚ್ಚು ಸ್ಪಂದಿಸುವಂತೆ ಮಾಡಿತು. ಆಂಗ್ಯುಲರ್‌ನಲ್ಲಿನ ಹೊಸ ಸಿಗ್ನಲ್‌ಗಳ ವೈಶಿಷ್ಟ್ಯವು ಬಹುಶಃ ಅದನ್ನು ನಾಯಕರೊಂದಿಗೆ ಸಮಾನವಾಗಿ ತರಬಹುದು.

ಒಳನೋಟ: ಹೆಚ್ಚು ಇಂಟರಾಕ್ಟಿವ್, ಡೇಟಾ-ತೀವ್ರ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ, ಸಾಲಿಡ್ ಮತ್ತು ಸ್ವೆಲ್ಟ್‌ನ ವಾಸ್ತುಶಿಲ್ಪಗಳು ಬಾಕ್ಸ್‌ನಿಂದ ಹೊರಗೆ ಅತ್ಯುತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಒದಗಿಸುತ್ತವೆ. ರಿಯಾಕ್ಟ್ ಮತ್ತು ವ್ಯೂ ನಂತಹ VDOM-ಆಧಾರಿತ ಲೈಬ್ರರಿಗಳು ಸಂಪೂರ್ಣವಾಗಿ ಸಮರ್ಥವಾಗಿವೆ, ಆದರೆ ಸಂಕೀರ್ಣತೆ ಬೆಳೆದಂತೆ ಡೆವಲಪರ್‌ಗಳು ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಷನ್ ತಂತ್ರಗಳ ಬಗ್ಗೆ ಹೆಚ್ಚು ಜಾಗೃತರಾಗಿರಬೇಕಾಗಬಹುದು.

ಸುತ್ತು 3: ಮೆಮೊರಿ ಬಳಕೆ

ಆಧುನಿಕ ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳಲ್ಲಿ ಕಡಿಮೆ ಕಾಳಜಿಯ ವಿಷಯವಾದರೂ, ನಿಧಾನಗತಿ ಮತ್ತು ಕ್ರ್ಯಾಶ್‌ಗಳನ್ನು ತಪ್ಪಿಸಲು ಕಡಿಮೆ-ಮಟ್ಟದ ಮೊಬೈಲ್ ಸಾಧನಗಳು ಮತ್ತು ದೀರ್ಘಕಾಲ ಚಾಲನೆಯಲ್ಲಿರುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಮೆಮೊರಿ ಬಳಕೆ ಇನ್ನೂ ನಿರ್ಣಾಯಕವಾಗಿದೆ.

• ಸ್ವೆಲ್ಟ್ & ಸಾಲಿಡ್‌ಜೆಎಸ್: ಅತಿ ಕಡಿಮೆ ಮೆಮೊರಿ ಹೆಜ್ಜೆಗುರುತಿನೊಂದಿಗೆ ನಾಯಕತ್ವಕ್ಕಾಗಿ ಸಮಬಲ ಸಾಧಿಸಿವೆ. ಮೆಮೊರಿಯಲ್ಲಿ VDOM ಇಲ್ಲದಿರುವುದರಿಂದ ಮತ್ತು ಕನಿಷ್ಠ ರನ್‌ಟೈಮ್‌ನೊಂದಿಗೆ, ಅವುಗಳು ಹಗುರ ಮತ್ತು ಸಮರ್ಥವಾಗಿದ್ದವು.
• ವ್ಯೂ: ನಾಯಕರಿಗಿಂತ ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಮೆಮೊರಿಯನ್ನು ಬಳಸಿಕೊಂಡಿತು, ಇದು ಅದರ VDOM ಮತ್ತು ರಿಯಾಕ್ಟಿವಿಟಿ ವ್ಯವಸ್ಥೆಗೆ ಕಾರಣವಾಗಿದೆ, ಆದರೆ ಅತ್ಯಂತ ಸಮರ್ಥವಾಗಿ ಉಳಿದಿದೆ.
• ರಿಯಾಕ್ಟ್: VDOM ಮತ್ತು ಫೈಬರ್ ಆರ್ಕಿಟೆಕ್ಚರ್ ಓವರ್‌ಹೆಡ್‌ನಿಂದಾಗಿ ಹೆಚ್ಚಿನ ಮೆಮೊರಿ ಹೆಜ್ಜೆಗುರುತನ್ನು ಹೊಂದಿತ್ತು.
• ಆಂಗ್ಯುಲರ್: ಅತಿ ಹೆಚ್ಚು ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ದಾಖಲಿಸಿತು, ಇದು ಅದರ ಸಮಗ್ರ ಫ್ರೇಮ್‌ವರ್ಕ್ ರಚನೆ ಮತ್ತು ಚೇಂಜ್ ಡಿಟೆಕ್ಷನ್‌ಗಾಗಿ Zone.js ನ ಪರಿಣಾಮವಾಗಿದೆ.

ಒಳನೋಟ: ಸಂಪನ್ಮೂಲ-ನಿರ್ಬಂಧಿತ ಸಾಧನಗಳನ್ನು ಗುರಿಯಾಗಿಸಿಕೊಂಡಿರುವ ಅಥವಾ ಬಹಳ ದೀರ್ಘ ಅವಧಿಗಳವರೆಗೆ ತೆರೆದಿರಲು ಉದ್ದೇಶಿಸಿರುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ, ಸ್ವೆಲ್ಟ್ ಮತ್ತು ಸಾಲಿಡ್‌ನ ಕಡಿಮೆ ಮೆಮೊರಿ ಓವರ್‌ಹೆಡ್ ಒಂದು ಗಮನಾರ್ಹ ಪ್ರಯೋಜನವಾಗಬಹುದು.

ಸಂಖ್ಯೆಗಳನ್ನು ಮೀರಿ: ಗುಣಾತ್ಮಕ ಅಂಶಗಳು

ಕಾರ್ಯಕ್ಷಮತೆಯ ಮಾನದಂಡಗಳು ಕಥೆಯ ಒಂದು ನಿರ್ಣಾಯಕ ಭಾಗವನ್ನು ಹೇಳುತ್ತವೆ, ಆದರೆ ಸಂಪೂರ್ಣ ಕಥೆಯನ್ನಲ್ಲ. ಫ್ರೇಮ್‌ವರ್ಕ್ ಆಯ್ಕೆಯು ನಿಮ್ಮ ತಂಡ, ನಿಮ್ಮ ಯೋಜನೆಯ ವ್ಯಾಪ್ತಿ, ಮತ್ತು ನಿಮ್ಮ ದೀರ್ಘಕಾಲೀನ ಗುರಿಗಳ ಮೇಲೆ ಹೆಚ್ಚು ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ.

ಡೆವಲಪರ್ ಅನುಭವ (DX) ಮತ್ತು ಕಲಿಕೆಯ ರೇಖೆ

• ವ್ಯೂ ಮತ್ತು ಸ್ವೆಲ್ಟ್ ಅತ್ಯಂತ ಆಹ್ಲಾದಕರ DX ಮತ್ತು ಸುಲಭವಾದ ಕಲಿಕೆಯ ರೇಖೆಗಳನ್ನು ಹೊಂದಿದ್ದಕ್ಕಾಗಿ ಹೆಚ್ಚಾಗಿ ಪ್ರಶಂಸಿಸಲ್ಪಡುತ್ತವೆ. ಅವುಗಳ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅರ್ಥಗರ್ಭಿತವಾಗಿದೆ ಮತ್ತು ದಸ್ತಾವೇಜು ಉನ್ನತ ದರ್ಜೆಯದ್ದಾಗಿದೆ.
• ರಿಯಾಕ್ಟ್‌ನ JSX ಮತ್ತು ಹುಕ್-ಆಧಾರಿತ ಮಾದರಿಯು ಶಕ್ತಿಯುತವಾಗಿದೆ ಆದರೆ ಕಡಿದಾದ ಕಲಿಕೆಯ ರೇಖೆಯನ್ನು ಹೊಂದಿರಬಹುದು, ವಿಶೇಷವಾಗಿ ಮೆಮೊೈಸೇಶನ್ ಮತ್ತು ಎಫೆಕ್ಟ್ ಡಿಪೆಂಡೆನ್ಸಿಗಳಂತಹ ಪರಿಕಲ್ಪನೆಗಳ ಸುತ್ತ.
• ಸಾಲಿಡ್‌ಜೆಎಸ್ ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಸಿಂಟ್ಯಾಕ್ಸ್‌ನ ದೃಷ್ಟಿಯಿಂದ ತೆಗೆದುಕೊಳ್ಳಲು ಸುಲಭವಾಗಿದೆ, ಆದರೆ ಅದರ ಫೈನ್-ಗ್ರೇನ್ಡ್ ರಿಯಾಕ್ಟಿವಿಟಿಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮಾನಸಿಕ ಮಾದರಿಯ ಬದಲಾವಣೆಯ ಅಗತ್ಯವಿದೆ.
• ಆಂಗ್ಯುಲರ್‌ನ ಅಭಿಪ್ರಾಯಾತ್ಮಕ ಸ್ವಭಾವ ಮತ್ತು ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಹಾಗೂ ಡಿಪೆಂಡೆನ್ಸಿ ಇಂಜೆಕ್ಷನ್‌ನಂತಹ ಪರಿಕಲ್ಪನೆಗಳ ಮೇಲಿನ ಅವಲಂಬನೆಯು ಅತ್ಯಂತ ಕಡಿದಾದ ಕಲಿಕೆಯ ರೇಖೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಆದರೆ ಈ ರಚನೆಯು ದೊಡ್ಡ ತಂಡಗಳಲ್ಲಿ ಸ್ಥಿರತೆಯನ್ನು ಜಾರಿಗೊಳಿಸಬಹುದು.

ಇಕೋಸಿಸ್ಟಮ್ ಮತ್ತು ಸಮುದಾಯ ಬೆಂಬಲ

• ರಿಯಾಕ್ಟ್ ಇಲ್ಲಿ ಸಾಟಿಯಿಲ್ಲದ ನಾಯಕ. ನೀವು ಎದುರಿಸಬಹುದಾದ ಯಾವುದೇ проблеಮೆಗೆ ಲೈಬ್ರರಿ, ಉಪಕರಣ, ಅಥವಾ ಟ್ಯುಟೋರಿಯಲ್ ಅನ್ನು ನೀವು ಕಾಣಬಹುದು. ಈ ಬೃಹತ್ ಜಾಗತಿಕ ಸಮುದಾಯವು ನಂಬಲಾಗದ ಸುರಕ್ಷತಾ ಜಾಲವನ್ನು ಒದಗಿಸುತ್ತದೆ.
• ವ್ಯೂ ಮತ್ತು ಆಂಗ್ಯುಲರ್ ಕೂಡ ಬಲವಾದ ಕಾರ್ಪೊರೇಟ್ ಬೆಂಬಲ ಮತ್ತು ಲೈಬ್ರರಿಗಳು ಹಾಗೂ ಸಮುದಾಯ ಸಂಪನ್ಮೂಲಗಳ ಸಮೃದ್ಧಿಯೊಂದಿಗೆ ಬಹಳ ದೊಡ್ಡ, ಪ್ರೌಢ ಇಕೋಸಿಸ್ಟಮ್‌ಗಳನ್ನು ಹೊಂದಿವೆ.
• ಸ್ವೆಲ್ಟ್ ಮತ್ತು ಸಾಲಿಡ್‌ಜೆಎಸ್ ಸಣ್ಣದಾದರೂ ವೇಗವಾಗಿ ಬೆಳೆಯುತ್ತಿರುವ ಇಕೋಸಿಸ್ಟಮ್‌ಗಳನ್ನು ಹೊಂದಿವೆ. ಪ್ರತಿಯೊಂದು ನಿರ್ದಿಷ್ಟ ಬಳಕೆಯ ಸಂದರ್ಭಕ್ಕೂ ನೀವು ಮೊದಲೇ ನಿರ್ಮಿಸಿದ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಕಂಡುಹಿಡಿಯದಿರಬಹುದು, ಆದರೆ ಅವುಗಳ ಸಮುದಾಯಗಳು ಉತ್ಸಾಹಭರಿತ ಮತ್ತು ಹೆಚ್ಚು ಸಕ್ರಿಯವಾಗಿವೆ.

ತೀರ್ಮಾನ: ಯಾವ ಫ್ರೇಮ್‌ವರ್ಕ್ ನಿಮಗೆ ಸರಿ?

ಡೇಟಾವನ್ನು ವಿಶ್ಲೇಷಿಸಿದ ನಂತರ ಮತ್ತು ಗುಣಾತ್ಮಕ ಅಂಶಗಳನ್ನು ಪರಿಗಣಿಸಿದ ನಂತರ, ಒಂದೇ "ಅತ್ಯುತ್ತಮ" ಫ್ರೇಮ್‌ವರ್ಕ್ ಇಲ್ಲ ಎಂಬುದು ಸ್ಪಷ್ಟವಾಗಿದೆ. ಅತ್ಯುತ್ತಮ ಆಯ್ಕೆಯು ಸಂಪೂರ್ಣವಾಗಿ ನಿಮ್ಮ ಯೋಜನೆಯ ಆದ್ಯತೆಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ.

ವಿವಿಧ ಸನ್ನಿವೇಶಗಳನ್ನು ಆಧರಿಸಿ ನಮ್ಮ ಅಂತಿಮ ಶಿಫಾರಸು ಇಲ್ಲಿದೆ:

• ಸಂಪೂರ್ಣ ಗರಿಷ್ಠ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಹಗುರವಾದ ಬಿಲ್ಡ್‌ಗಳಿಗಾಗಿ: ಸ್ವೆಲ್ಟ್ ಅಥವಾ ಸಾಲಿಡ್‌ಜೆಎಸ್ ಆಯ್ಕೆಮಾಡಿ. ನಿಮ್ಮ ಪ್ರಾಥಮಿಕ ಗುರಿಯು ಸಾಧ್ಯವಾದಷ್ಟು ವೇಗದ ಲೋಡ್ ಸಮಯಗಳು, ಅತ್ಯಂತ ಸ್ಪಂದಿಸುವ UI, ಮತ್ತು ಸಾಧ್ಯವಾದಷ್ಟು ಚಿಕ್ಕ ಬಂಡಲ್ ಗಾತ್ರವಾಗಿದ್ದರೆ (ಉದಾ. ಇ-ಕಾಮರ್ಸ್ ಸೈಟ್‌ಗಳು, ಮೊಬೈಲ್-ಫಸ್ಟ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು, ಇಂಟರಾಕ್ಟಿವ್ ದೃಶ್ಯೀಕರಣಗಳು), ಈ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು ತಮ್ಮದೇ ಆದ ವರ್ಗದಲ್ಲಿವೆ. ಸಂಕೀರ್ಣ, ರಿಯಾಕ್ಟಿವ್ ಡೇಟಾ ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್‌ಗಾಗಿ ಸಾಲಿಡ್‌ಜೆಎಸ್‌ಗೆ ಮೇಲುಗೈ ಸಿಗುತ್ತದೆ, ಆದರೆ ಸ್ವೆಲ್ಟ್ ಸ್ವಲ್ಪ ಸರಳ, ಹೆಚ್ಚು ಮಾಂತ್ರಿಕ ಡೆವಲಪರ್ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ.
• ಬೃಹತ್ ಇಕೋಸಿಸ್ಟಮ್ ಮತ್ತು ನೇಮಕಾತಿ ಪೂಲ್‌ಗಾಗಿ: ರಿಯಾಕ್ಟ್ ಆಯ್ಕೆಮಾಡಿ. ನಿಮ್ಮ ಯೋಜನೆಗೆ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಲೈಬ್ರರಿಗಳು, ಉಪಕರಣಗಳು, ಮತ್ತು ಡೆವಲಪರ್‌ಗಳ ಪ್ರವೇಶದ ಅಗತ್ಯವಿದ್ದರೆ, ರಿಯಾಕ್ಟ್ ಅತ್ಯಂತ ಸುರಕ್ಷಿತ ಮತ್ತು ಪ್ರಾಯೋಗಿಕ ಆಯ್ಕೆಯಾಗಿದೆ. ಅದರ ಕಾರ್ಯಕ್ಷಮತೆ ತುಂಬಾ ಉತ್ತಮವಾಗಿದೆ, ಮತ್ತು ಉದ್ಯೋಗ ಮಾರುಕಟ್ಟೆಯಲ್ಲಿ ಅದರ ಪ್ರಾಬಲ್ಯವು ಪ್ರಪಂಚದ ಎಲ್ಲಿಯಾದರೂ ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ತಂಡವನ್ನು ಅಳೆಯಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.
• ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಸುಲಭಲಭ್ಯತೆಯ ಸಮತೋಲನಕ್ಕಾಗಿ: ವ್ಯೂ ಆಯ್ಕೆಮಾಡಿ. ವ್ಯೂ ಒಂದು ಸಿಹಿ ತಾಣವನ್ನು ಮುಟ್ಟುತ್ತದೆ. ಇದು ರಿಯಾಕ್ಟ್‌ಗೆ ಸ್ಪರ್ಧಾತ್ಮಕವಾದ ಅತ್ಯುತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನೀಡುತ್ತದೆ, ಆದರೆ ಅನೇಕರು ಹೆಚ್ಚು ಅರ್ಥಗರ್ಭಿತ ಮತ್ತು ಕಲಿಯಲು ಸುಲಭವೆಂದು ಕಂಡುಕೊಳ್ಳುವ ಡೆವಲಪರ್ ಅನುಭವದೊಂದಿಗೆ. ಇದು ಸಣ್ಣ ಮತ್ತು ದೊಡ್ಡ ಪ್ರಮಾಣದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಒಂದು ಅದ್ಭುತ ಆಲ್-ರೌಂಡರ್ ಆಗಿದೆ.
• ದೊಡ್ಡ-ಪ್ರಮಾಣದ, ಎಂಟರ್‌ಪ್ರೈಸ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ: ಆಂಗ್ಯುಲರ್ ಆಯ್ಕೆಮಾಡಿ. ನೀವು ದೊಡ್ಡ ಡೆವಲಪರ್‌ಗಳ ತಂಡದೊಂದಿಗೆ ಸಂಕೀರ್ಣ, ದೀರ್ಘಕಾಲೀನ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದರೆ, ಆಂಗ್ಯುಲರ್‌ನ ರಚನಾತ್ಮಕ ಮತ್ತು ಅಭಿಪ್ರಾಯಾತ್ಮಕ ಸ್ವಭಾವವು ಒಂದು ದೊಡ್ಡ ಆಸ್ತಿಯಾಗಬಹುದು. ಇದು ಸ್ಥಿರತೆಯನ್ನು ಜಾರಿಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಎಂಟರ್‌ಪ್ರೈಸ್-ಮಟ್ಟದ ಸಂಕೀರ್ಣತೆಯನ್ನು ನಿಭಾಯಿಸಬಲ್ಲ ಒಂದು ದೃಢವಾದ, ಎಲ್ಲವನ್ನೂ ಒಳಗೊಂಡ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ, ಮತ್ತು ಅದರ ಕಾರ್ಯಕ್ಷಮತೆಯು ನಿರಂತರವಾಗಿ ಸುಧಾರಿಸುತ್ತಿದೆ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳ ಜಗತ್ತು ಹಿಂದೆಂದಿಗಿಂತಲೂ ವೇಗವಾಗಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದೆ. ಸ್ವೆಲ್ಟ್ ಮತ್ತು ಸಾಲಿಡ್‌ಜೆಎಸ್‌ನಂತಹ ಸವಾಲುಗಾರರಿಂದ ಕಂಪೈಲರ್‌ಗಳ ಏರಿಕೆ ಮತ್ತು ವರ್ಚುವಲ್ DOM ನಿಂದ ದೂರ ಸರಿಯುತ್ತಿರುವುದು ಇಡೀ ಇಕೋಸಿಸ್ಟಮ್ ಅನ್ನು ಮುಂದಕ್ಕೆ ತಳ್ಳುತ್ತಿದೆ. ಅಂತಿಮವಾಗಿ, "ಫ್ರೇಮ್‌ವರ್ಕ್ ಯುದ್ಧಗಳು" ಒಂದು ಒಳ್ಳೆಯ ವಿಷಯ—ಅವು ನಾವೀನ್ಯತೆ, ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆ, ಮತ್ತು ಮುಂದಿನ ಪೀಳಿಗೆಯ ವೆಬ್ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸಲು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹೆಚ್ಚು ಶಕ್ತಿಯುತ ಸಾಧನಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತವೆ. ನಿಮ್ಮ ಯೋಜನೆಯ ವಿಶಿಷ್ಟ ನಿರ್ಬಂಧಗಳು ಮತ್ತು ಗುರಿಗಳಿಗೆ ಉತ್ತಮವಾಗಿ ಸರಿಹೊಂದುವ ಉಪಕರಣವನ್ನು ಆರಿಸಿ, ಮತ್ತು ನೀವು ಯಶಸ್ಸಿನ ಹಾದಿಯಲ್ಲಿರುತ್ತೀರಿ.